<template>
   <div class="swip">
      <swiper
      :modules="modules"
      :loop="true"
      :slides-per-view="1"
      :space-between="50"
      :autoplay="{ delay: 4000, disableOnInteraction: false }"
      :navigation="navigation"
      :pagination="{ clickable: true }"
      :scrollbar="{ draggable: false }"
      class="swiperBox"
      @slideChange="onSlideChange"
    >
        <swiper-slide v-for="data in bannerList" :key="data">
          <img :src="data.imgUrl" alt="">
        </swiper-slide>
        <div class="swiper-button-prev" @click.stop="prevEl(item, index)" />
        <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
        <div class="swiper-button-next" @click.stop="nextEl" />
        <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
      </swiper>
    </div>
</template>

<script setup>
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import { onMounted, ref } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue'; // swiper所需组件
import { Autoplay, Navigation, Pagination, Scrollbar } from 'swiper/modules';
import { getBannerAPI }from '@/apis/home.js'
const bannerList = ref([])
const navigation = ref({
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev",
});
const modules = [Autoplay, Pagination, Navigation, Scrollbar]
const prevEl = (item, index) => {
  // console.log('上一张' + index + item)
};
const nextEl = () => {
  // console.log('下一张')
};
// 更改当前活动swiper
const onSlideChange = (swiper) => {
// swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
  // console.log(swiper.activeIndex)
}
const getBanner = async ()=>{
  const res = await getBannerAPI()
  bannerList.value = res.result
}
onMounted(()=>{
  getBanner()
})
</script>

<style lang="scss" scoped>
.swip{
  width: 1240px;
  height: 500px;
  margin: 0 auto;
  position: relative;
  top: -500px;

  z-index: 98;
}
</style>